<template>
  <header>
    <div class="l-content">
      <el-button
        @click="handleMenu"
        plain
        icon="el-icon-menu"
        size="mini"
      ></el-button>
      <!-- 这个按钮的目的是点击扩大或者缩小侧边栏 -->
      <!-- <h3 style="color:#fff">首页</h3> -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item
          v-for="item in tags"
          :key="item.path"
          :to="{ path: item.path }"
          >{{ item.label }}</el-breadcrumb-item
        >
        <!-- //这里的tags是使用的Vuex内的数据 调用的计算属性里面的数据 -->
      </el-breadcrumb>
    </div>
    <!-- //以上的div组件是指左边header导航栏中的内容 -->
    <div class="r-content">
      <el-dropdown trigger="click" szie="mini">
        <span>
          <img class="user" :src="imgaeUrl" />
          <!-- //头像 -->
        </span>
        <el-dropdown-menu>
          <el-dropdown-item @click.native="logOut">退出</el-dropdown-item>
          <!-- 退出的按钮 -->
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <!-- 以上的div是值右边的头像以及头像内部存在的操作 -->
  </header>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import { getUserInfo, editUserInfo } from "../api/data";
export default {
  name: "CommonHeader",
  data() {
    return {
      isShow: false,
      imgaeUrl: "",
    };
  },
  methods: {
    infoShow() {
      this.isShow = true;
    },
    handleMenu() {
      this.$store.commit("CollapseMenu");
      //这里是通过改变vuex内部的collapseMenu属性 从而影响了侧边栏Aside组件中使用的这个属性控制的侧边栏的扩大和缩小
    },
    logOut() {
      //通过调用vuex和路由实现跳转会初始界面
      this.$store.commit("clearToken"); //这里调用方法清除store中的数据 token 以及menu token是登入凭据 menu与此用户的一些有关数据
      this.$store.commit("clearMenu");
      this.$store.commit("clearUserData");
      this.$router.push("/login");
    },
  },
  computed: {
    //这里使用了vuex的方法
    ...mapState({
      tags: (state) => state.tab.tabsList, //获取vuex内部的list这个数组中的数据 实现头部导航栏跳转
    }),
    ...mapGetters(["processedData"]),
  },
  created() {
    getUserInfo(this.$store.state.user.token).then(({ data: res }) => {
      if (res.status === 0) {
        let stringToDelete = "picture/";
        let originalString = res.data.user_pic;
        let baseUrl = "http://127.0.0.1:3002/";
        let newString = baseUrl + originalString.replace(stringToDelete, "");
        this.imgaeUrl = newString;
      }
    });
  },
  mounted() {
    // 在 mounted 钩子中获取处理过的数据
  },
};
</script>

<style lang="less" scoped>
header {
  display: flex;
  height: 100%;
  justify-content: space-between;
  align-items: center;
}
.l-content {
  display: flex;
  align-items: center;
  .el-button {
    margin-right: 20px;
  }
}
.r-content {
  .user {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
}
</style>